<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <div class="p-2 profile-library">
    <div class="mb-[10px]">
      <el-card shadow="hover">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true" size="small" label-width="80px">
          <el-form-item label="型材类型" prop="type">
            <el-select @change="typeChange" v-model="queryParams.type" clearable>
              <el-option v-for="item in profileTypes" :label="item.label" :value="item.value" :key="item.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="编号" prop="serialNumber" v-if="hasNum">
            <el-input v-model="queryParams.serialNumber" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="属性号" prop="attributeNumber" v-if="hasAttr">
            <el-input v-model="queryParams.attributeNumber" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="MAT1_ID" prop="mat1Id" v-if="hasMat">
            <el-input v-model="queryParams.mat1Id" placeholder="请输入" clearable />
          </el-form-item>
          <!-- <el-form-item label="t铺层代号" prop="displayName" v-if="hasLayer">
              <el-input v-model="queryParams.displayName" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="t1铺层代号" prop="displayName" v-if="hasMultLayer">
              <el-input v-model="queryParams.displayName" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="t2铺层代号" prop="displayName" v-if="hasMultLayer">
              <el-input v-model="queryParams.displayName" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="t3铺层代号" prop="displayName" v-if="hasMultLayer">
              <el-input v-model="queryParams.displayName" placeholder="请输入" clearable />
            </el-form-item> -->
          <el-form-item style="padding-left: 80px">
            <el-button type="primary" icon="search" @click="doQuery">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
          <!-- <el-form-item style="width: 100%; padding-left: 80px">
              <span class="tiltops">注意：※请切换型材类型查看不同型材数据</span>
            </el-form-item> -->
        </el-form>
      </el-card>
    </div>

    <el-card shadow="hover">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button size="small" type="primary" plain icon="Plus" @click="handleVisible('add', null)">新增型材</el-button>
          </el-col>
        </el-row>
      </template>

      <el-table v-loading="loading" :data="profileList" ref="tableRef">
        <el-table-column
          :label="item.label"
          v-for="item in defaultColunms"
          :key="item.label"
          :fixed="item.fixed"
          :prop="item.prop"
          align="right"
          :width="item.width"
        />
        <el-table-column :label="item.label" v-for="item in cutColunms" align="right" :key="item.label" :fixed="item.fixed" :prop="item.prop" />
        <el-table-column label="操作" width="210" fixed="right">
          <template #default="scope">
            <div>
              <el-tooltip content="计算结果" placement="top">
                <el-button size="small" link type="primary" icon="Edit" @click="handleVisible('result', scope.row)">计算结果</el-button>
              </el-tooltip>
              <!-- <el-tooltip content="修改" placement="top">
                <el-button size="small" link type="primary" icon="EditPen" @click="handleVisible('edit', scope.row)">修改</el-button>
              </el-tooltip> -->
              <el-tooltip content="删除" placement="top">
                <el-button size="small" link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagenation">
        <pagination
          v-show="total > 0"
          style="margin-top: 0;"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          :total="total"
          :background="false"
          layout="total, sizes, prev, pager, next, jumper"
          @pagination="handleCurrentChange"
        />
      </div>
    </el-card>
    <AddProfile :addVisible="addVisible" :row-data="currentData" v-if="addVisible" @handleEvent="handleEvent" />
    <ResultDialog :resultVisible="resultVisible" :row-data="currentData" v-if="resultVisible" @handleResultEvent="handleResultEvent" />
  </div>
</template>
  <!-- 型材库 -->
  <script name="profileLibrary" setup>
import { profileTypes, defaultColunms, columns1, columns2, columns3, columns4, columns5, columns6, columns7 } from '../profileLibrary.js';
import AddProfile from './AddProfile.vue';
import { getProfiletList, deleteProfile } from '@/api/profileLibrary';
import ResultDialog from './ResultDialog.vue';

const loading = ref(false);
const addVisible = ref(false);
const resultVisible = ref(false);
const tableRef = ref(null);
// 条件展示查询区域
const hasNum = ref(true);
const hasAttr = ref(true);
const hasMat = ref(true);
const cutColunms = ref(columns1);
const currentData = ref(null);

const profileList = ref([]);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  type: '',
  serialNumber: '',
  attributeNumber: '',
  mat1Id: '',
  isAsc: 'descending'
});
const total = ref(0);
const showSearch = ref(true);

//查询数据
const doQuery = () => {
  getProfiletList(queryParams.value).then((res) => {
    if (res) {
      total.value = res.total;
      profileList.value = res.rows;
    }
  });
};
// 翻页
const handleCurrentChange = () => {
  doQuery();
};
// 点击函数
const handleVisible = (type, data) => {
  currentData.value = data;
  if (type === 'add') {
    currentData.value = null;
    addVisible.value = true;
  }
  if (type === 'result') {
    resultVisible.value = true;
  }
  if (type === 'edit') {
    addVisible.value = true;
  }
};
// 回调函数
const handleEvent = (data) => {
  addVisible.value = false;
  if (data?.type === 'refresh') {
    doQuery();
  }
};
const handleResultEvent = ()=>{
  resultVisible.value = false;
}
// 重置
const resetQuery = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    type: '',
    serialNumber: '',
    attributeNumber: '',
    mat1Id: '',
    isAsc: 'descending'
  };
  doQuery();
};
// 删除
const handleDelete = (data) => {
  ElMessageBox.confirm('是否确认删除该项？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteProfile({ ids: [data.id], type: data.type }).then((res) => {
      ElMessage({ showClose: true, message: '删除成功。', type: 'success' });
      doQuery();
    });
  });
};
// 型材类型改变
const typeChange = (event) => {
  switch (event) {
    case 'CAP': {
      cutColunms.value = columns1;
      break;
    }
    case 'T': {
      cutColunms.value = columns2;
      break;
    }
    case 'I': {
      cutColunms.value = columns3;
      break;
    }
    case 'FI': {
      cutColunms.value = columns4;
      break;
    }
    case 'FZ': {
      cutColunms.value = columns5;
      break;
    }
    case 'FZFF': {
      cutColunms.value = columns5;
      break;
    }
    case 'FZAFF': {
      cutColunms.value = columns5;
      break;
    }
    case 'FC': {
      cutColunms.value = columns4;
      break;
    }
    case 'FCSF': {
      cutColunms.value = columns4;
      break;
    }
    case 'FL': {
      cutColunms.value = columns6;
      break;
    }
    case 'FLATI': {
      cutColunms.value = columns6;
      break;
    }
    case 'FLA': {
      cutColunms.value = columns6;
      break;
    }
    case 'FGO': {
      cutColunms.value = columns7;
      break;
    }
    case 'FGM': {
      cutColunms.value = columns7;
      break;
    }
    case 'FGI': {
      cutColunms.value = columns7;
      break;
    }
    case 'FGATIW': {
      cutColunms.value = columns7;
      break;
    }
    case 'FGTI': {
      cutColunms.value = columns7;
      break;
    }
    case 'FGA': {
      cutColunms.value = columns7;
      break;
    }
    case 'SK': {
      cutColunms.value = columns7;
      break;
    }
  }
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    type: event,
    serialNumber: '',
    attributeNumber: '',
    mat1Id: '',
    isAsc: 'descending'
  };
  doQuery();
};
onMounted(() => {
  doQuery();
});
</script>
  <style lang="scss" scoped>
.profile-library {
  height: calc(100vh - 155px);
  overflow: auto;
  .tiltops {
    color: red;
  }
  .pagenation {
    display: flex;
    justify-content: end;
    margin-top: 10px;
  }
}
</style>